import { Card, Row, Col, Table, Input, Button, Pagination, Popconfirm, Tree } from "antd"
import { getAccountList } from '@/api/users'
import useDataList from '@/hooks/useDataList'
import type { TreeDataNode, TreeProps,TableProps } from 'antd'
import { useEffect, useState } from "react";
import { useSelector } from 'react-redux'

interface MenuType{
    label:string;
    icon:string;
    key:string;
    children?:MenuType[]
}
interface DataType{
    id: number;
    accountName: string;
    auth: string;
    person: string;
    tel: string;
    department: string;
    // menu:
}

interface SearchType{
    accountName:string
}

const treeData: TreeDataNode[] = [
    {
        title: '工作台',
        key: '/dashboard',
    },
    {
        title: '租户管理',
        key: '/users',
        children: [
            { title: '租户列表', key: '/users/list' },
            { title: '新增租户', key: '/users/add' },
        ],
    },
    {
        title: '物业管理',
        key: '/estate',
        children: [
            {
                title: "楼宇管理",
                key: "/estate/tenement"
            },
            {
                title: "房间管理",
                key: "/estate/room"
            },
            {
                title: "车辆信息",
                key: "/estate/car"
            }

        ]
    },
    {
        title: '报修管理',
        key: '/repair',
    },
    {
        title: '财务管理',
        key: '/finance',
        children: [
            {
                title: "合同管理",
                key: "/finance/contract"
            },
            {
                title: "合同详情",
                key: "/finance/surrender"
            },
            {
                title: "账单管理",
                key: "/finance/bill"
            }
        ]
    },
    {
        title: '招商管理',
        key: '/merchants',
    },
    {
        title: '运营管理',
        key: '/operation',
        children: [
            {
                title: "运营总览",
                key: "/operation/all"
            },
            {
                title: "文章发布",
                key: "/operation/article"
            },
            {
                title: "内容评论",
                key: "/operation/comments"
            }
        ]
    },
    {
        title: '设备管理',
        key: '/equipment',
    },
    {
        title: '能源消耗',
        key: '/energy',
    },
    {
        title: '系统设置',
        key: "/settings",
    },
    {
        title: '个人中心',
        key: "/personal",
    },
]

function Setting() {

    function extractTreeKeys(data:any){
        let keys:string[]=[];
        data.forEach((item:any)=>{
            if(item.children && item.children.length){
                const childKeys = extractTreeKeys(item.children)
                keys = keys.concat(childKeys)
            }else{
                keys.push(item.key)
            }
        })
        return keys
    }
    const [checkedKeys,setCheckedKeys]=useState<React.Key[]>([])

    const edit=(menu:MenuType[],accountName:any)=>{
        setAccountName(accountName)
        const newCheckedKeys = extractTreeKeys(menu)
        setCheckedKeys(newCheckedKeys)
    }
    const columns:any=[
        {
            title: 'No.',
            key: 'index',
            render:(text:any, record:any, index:any) => index + 1
        },
        {
            title: "账号名称",
            dataIndex: "accountName",
            key: "accountName",
        },{
            title: "所属权限",
            dataIndex: "auth",
            key: "auth",
        },
        {
            title: "使用人",
            dataIndex: "person",
            key: "person",
        },
        {
            title: "使用人电话",
            dataIndex: "tel",
            key: "tel",
        },
        {
            title: "所属部门",
            dataIndex: "department",
            key: "department",
        },
        {
            title:'操作',
            key:'operate',
            render(value:string,record:any){
                return <>
                    <Button size="small" type="primary" className="mr" onClick={()=>edit(record.menu,record.accountName)}>修改权限</Button>
                    <Popconfirm 
                        title='操作提示' 
                        description="确认要删除当前账号吗"
                        okText="是"
                        cancelText="否"
                        >
                        <Button size="small" type="primary" className="mr" danger>删除账号</Button>
                    </Popconfirm>
                </>
            }
        }
    ]
    
    const [accountName,setAccountName]=useState<string>("当前用户")
    const { menuList } = useSelector((state:any)=>state.authSlice)
    const {
        dataList,
        page,
        pageSize,
        total,
        loading,
        formData,
        setDataList,
        setPage,
        setPageSize,
        setTotal,
        setLoading,
        setFormData,
        handleChange,
        onChange,
        reset,
        loadData
    } = useDataList<SearchType,DataType>({accountName:''},getAccountList)

    const onCheck: TreeProps['onCheck']=(checkedKeys)=>{
        setCheckedKeys(checkedKeys as React.Key[])
    }

    useEffect(()=>{
        setCheckedKeys(extractTreeKeys(menuList))
    },[])

    const handle = ()=>{
        console.log(checkedKeys,accountName);
        
    }
    return <div>
        <Card>
            <Row gutter={8}>
                <Col span={8}>
                    <Input placeholder="请输入账户名" name="accountName" value={formData.accountName} onChange={handleChange} />
                </Col>
                <Col span={8}>
                    <Button type="primary" onClick={loadData}>搜索</Button>
                </Col>
                <Col span={8} className="tr">
                    <Button type="primary">新建账号</Button>
                </Col>
            </Row>
        </Card>
        <Card>
            <Row gutter={8}>
                <Col span={8}>
                    <Card title={accountName+':使用权限'}>
                        <Tree 
                        checkable 
                        treeData={treeData} 
                        onCheck={onCheck}
                        checkedKeys={checkedKeys}
                        />
                    </Card>
                    <Card>
                        <Popconfirm
                            title="操作提示"
                            description={`您确认要修改${accountName}用户的权限吗`}
                            okText="是"
                            cancelText="否"
                            onConfirm={handle}
                        >
                            <Button type="primary">提交修改</Button>
                        </Popconfirm>
                    </Card>
                </Col>
                <Col span={16}>
                    <Card>
                        <Table 
                            dataSource={dataList}
                            loading={loading}
                            columns={columns}
                            rowKey={record => record.id}
                            pagination={false}
                        />
                        <Pagination 
                            className="fr mr" 
                            showQuickJumper
                            current={page}
                            pageSize={pageSize}
                            showSizeChanger
                            showTotal={(total)=>`共${total}条`}
                            onChange={onChange}
                        />
                    </Card>
                </Col>
                
            </Row>
        </Card>
    </div>
}

export default Setting